<template>
  <base-breadcrumb>
    <a-card :bordered="false"  >
      <title-name :title="detail.unitName+ '年度会议计划表'"></title-name>

      <div v-if="(permissions == 1) || isApproval" class="pub-table-select-count">
          <a-icon type="info-circle" theme="twoTone"/>
          <span style="margin-right: 12px">
           会议计划状态：<span class="pub-table-item">{{statusMap[status] ? statusMap[status] : '-'}}</span>
          </span>
          <span style="margin-right: 12px">
           已填写部门数：<span class="pub-table-item">{{detail.filledDeptSum}}</span>
          </span>
          <span style="margin-right: 12px">
           总预算：<span class="pub-table-item">{{deptBudget}}</span><!-- detail.totalBudget -->
          </span>
          <!--  -->
          <a class="right-btn" @click="openChange">
            <span>{{openAll ? '收起' : '展开'}}所有详细信息</span>
            <a-icon :type="openAll ? 'up' : 'down'" />
          </a>
      </div>

      <CollapaseCon
        :ref="'collapase'"
        :editable="editable"
        :permissions="permissions"
        :open="openAll"
        :info="detail.list"
      ></CollapaseCon>
    </a-card>

    <div class="tool-btns page-btn-right-top" v-if="pageType !== 'look' && (!isApproval)">
       <a-button @click="handleClose">关闭</a-button>
       <a-button  @click="saveDRAFT('DRAFT')" :disabled="permissions == 1 && (!hasOfficeDRAFR && (!hasOtherSUBMITTED))" :loading="loading.DRAFT" type="primary">保存草稿</a-button>
       <a-button @click="handleSave('SUBMITTED')" :disabled="permissions == 1 && hasOtherDRAFR" :loading="loading.SUBMITTED" type="primary">提交</a-button>
        <!-- <a-button v-else type="primary" :loading="loading.SUBMITTED" @click="handleSave('SUBMITTED')"
            >结束填报</a-button
        > -->
    </div>
    <div class="tool-btns page-btn-right-top" v-else>
        <a-button @click="handleClose">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>
<script>

import CollapaseCon from './components/collapase.vue'
import { annualPlanSchedules, annualPlanSchedulesAdd, annualPlanSchedulesEdit } from '@/api/office/anualConference/index'
import anualConBase from './baseconfig.js'
export default {
    components: {
        CollapaseCon,
    },
    props: {
      isAudit: {
          type: Boolean,
          default() {
              return false
          }
      }
    },
    data() {
        return {
          openAll: false,
          loading: {
            DRAFT: false,
            SUBMITTED: false
          },
          statusMap: anualConBase.statusMap,
          currentDetail: {
            unitName: '',
            filledDeptSum: '0/0',
            totalBudget: 0,
            list: []
          }
        }
    },
    created() {
      const param = {
        id: this.$route.query.id
      }
      param.isAuditUse = this.isApproval;

      annualPlanSchedules(param).then((res) => {
        if ((res && res.data && res.data.code) || (res && res.code == 200)) {
          this.currentDetail = res.data;
        }
      })
    },
    computed: {
      detail() {
        return this.currentDetail
      },
      editable() {
        return this.$route.query.pageType == 'edit'
      },
      permissions() {
        return this.$route.query.permissions || this.detail.permissions;
      },
      pageType() {
        return this.$route.query.pageType
      },
      status() {
        return this.$route.query.status || this.detail.planStatus;
      },
      deptBudget() {
        const val = this.detail.list;
        let num = 0;
        val.map((item, index) => {
          const list = item.list;
          if (item.status == 'SUBMITTED') {
            list.map((e, i) => {
              if (e.meetingBudget !== null && !isNaN(e.meetingBudget)) {
                num += e.meetingBudget
              }
            })
          }
        })
        return num;
      },
      hasOfficeDRAFR() {
        // 有办公室未提交数据
        const val = [ ...this.detail.list ];
        const list = val.filter((item, index) => {
          return (item.status == 'DRAFT') && (item.isLoginAndJoinOffice == true);
        })
        return list.length ? true : false;
      },
      hasOtherDRAFR() {
        // 有其他部门未提交数据
        const val = [ ...this.detail.list ];
        const list = val.filter((item, index) => {
          return (item.status == 'DRAFT') && (!item.isLoginAndJoinOffice);
        })
        return list.length ? true : false;
      },
      hasOtherSUBMITTED() {
        // 有其他部门已提交数据
        const val = [ ...this.detail.list ];
        const list = val.filter((item, index) => {
          return (item.status == 'SUBMITTED') && (!item.isLoginAndJoinOffice);
        })
        return list.length ? true : false;
      },
      hasLoginAdd() {
        const val = [ ...this.detail.list ];
        const list = val.filter((item, index) => {
          return item.isLoginAndJoinOffice == true
        })
        return list.length ? true : false;
      },
      isApproval() {
        return this.$route.query.type == 'approve' || this.isAudit;
      }
    },
    mounted() {
      // console.log(this.detail.length)
      this.openAll = !this.editable || this.detail.length == 1;
    },
    methods: {
      openChange() {
        // console.log(this.openAll)
        this.openAll = (!this.openAll);
      },
      handleClose() {
          this.$multiTab.close(this.$route.fullpath)
          this.isApproval && window.close();
      },
      handleSave(type) {
        let list = this.detail.list.map((item, index) => {
          const obj = {
            id: this.$route.query.id,
            departmentId: item.departmentId,
            list: item.list,
            status: type
          }
          return obj
        })
        this.$refs.collapase.validate().then((err) => {
          if (err) {
            this.$message.error(err)
            return
          }
          // 是否确定要提交会议计划，提交后不可再修改会议计划
          this.loading.SUBMITTED = true;
          if (this.permissions == 2) {
            let _this = this;
            this.$confirm({
              title: '温馨提示',
              content: '是否确定要提交会议计划，提交后不可再修改会议计划!',
              onOk() {
                return new Promise((resolve, reject) => {
                  annualPlanSchedulesAdd(list).then((res) => {
                    if ((res && res.data && res.data.code) || (res && res.code == 200)) {
                      _this.loading.SUBMITTED = false;
                      _this.$message.success('提交成功');
                      _this.handleClose();
                      resolve()
                    } else {
                      _this.$message.error('提交失败！');
                    }
                  }).catch(() => {
                    _this.loading.SUBMITTED = false;
                  })
                }).catch(() => console.log('Oops errors!'));
              },
              onCancel() {
                _this.loading.SUBMITTED = false;
              },
            });
          } else {
            annualPlanSchedulesAdd(list).then((res) => {
              if ((res && res.data && res.data.code) || (res && res.code == 200)) {
                if (this.permissions == 1) {
                  this.annualPlanSchedulesEdit();
                } else {
                  this.loading.SUBMITTED = false;
                  this.$message.success('提交成功');
                  this.handleClose();
                }
              } else {
                this.$message.error('提交失败！');
              }
            }).catch(() => {
              this.loading.SUBMITTED = false;
            })
          }
        })
      },
      saveDRAFT(type) {
        let list = this.detail.list.map((item, index) => {
          const obj = {
            id: this.$route.query.id,
            departmentId: item.departmentId,
            list: item.list,
            status: item.status
          }
          return obj
        })
        this.loading.DRAFT = true;
        annualPlanSchedulesAdd(list).then((res) => {
          this.loading.DRAFT = false;
          if ((res && res.data && res.data.code) || (res && res.code == 200)) {
              this.$message.success('保存成功');
              this.handleClose();
          } else {
            this.$message.error('保存失败！');
          }
        }).catch(() => {
          this.loading.DRAFT = false;
        })
      },
      /**
       * 提交审核
       */
      annualPlanSchedulesEdit() {
        const param = {
          id: this.$route.query.id,
          planStatus: 'SUBMITTED'
        }
        let _this = this;
        this.$confirm({
          title: '温馨提示',
          content: '是否确定要提交会议计划，提交后不可再修改会议计划!',
          onOk() {
            return new Promise((resolve, reject) => {
              annualPlanSchedulesEdit(param).then((res) => {
                _this.loading.SUBMITTED = false;
                if ((res && res.data && res.data.code) || (res && res.code == 200)) {
                  _this.$message.success('提交成功');
                  _this.handleClose();
                  resolve()
                } else {
                  _this.$message.error('提交失败！');
                }
              }).catch(() => {
                _this.loading.SUBMITTED = false;
              })
            }).catch(() => console.log('Oops errors!'));
          },
          onCancel() {
            _this.loading.SUBMITTED = false;
          },
        });
      }
    },
}
</script>
<style lang="less" scoped>
  .pub-table-select-count {
    overflow: hidden;
  }
  .pub-table-item {
    color: #666;
    font-weight: bold;
  }
  .right-btn {
    float: right;
  }
  .tool-btns .ant-btn{
    margin-left: 12px;
   }
</style>
